<template>
	<view class="container">
		<view class="doctor-search-section">

			<!-- 内科医生 -->
			<view class="department-section">
				<view class="department-title">内科</view>
				<view class="doctor-list">
					<view class="doctor-item" v-for="(doctor, index) in allDoctors[0]" :key="index"
						@click="viewDoctorDetail(doctor)">
						<image class="doctor-avatar" :src="doctor.avatar"></image>
						<view class="doctor-info">
							<text class="doctor-name">{{ doctor.name }} <text
									class="doctor-title">{{ doctor.title }}</text></text>
							<text class="doctor-dept">{{ doctor.department }}</text>
							<text class="doctor-specialty">擅长：{{ doctor.specialty }}</text>
						</view>
						<view class="appointment-btn">预约</view>
					</view>
				</view>
			</view>

			<!-- 外科医生 -->
			<view class="department-section">
				<view class="department-title">外科</view>
				<view class="doctor-list">
					<view class="doctor-item" v-for="(doctor, index) in allDoctors[1]" :key="index"
						@click="viewDoctorDetail(doctor)">
						<image class="doctor-avatar" :src="doctor.avatar"></image>
						<view class="doctor-info">
							<text class="doctor-name">{{ doctor.name }} <text
									class="doctor-title">{{ doctor.title }}</text></text>
							<text class="doctor-dept">{{ doctor.department }}</text>
							<text class="doctor-specialty">擅长：{{ doctor.specialty }}</text>
						</view>
						<view class="appointment-btn">预约</view>
					</view>
				</view>
			</view>

			<!-- 儿科医生 -->
			<view class="department-section">
				<view class="department-title">儿科</view>
				<view class="doctor-list">
					<view class="doctor-item" v-for="(doctor, index) in allDoctors[2]" :key="index"
						@click="viewDoctorDetail(doctor)">
						<image class="doctor-avatar" :src="doctor.avatar"></image>
						<view class="doctor-info">
							<text class="doctor-name">{{ doctor.name }} <text
									class="doctor-title">{{ doctor.title }}</text></text>
							<text class="doctor-dept">{{ doctor.department }}</text>
							<text class="doctor-specialty">擅长：{{ doctor.specialty }}</text>
						</view>
						<view class="appointment-btn">预约</view>
					</view>
				</view>
			</view>

			<!-- 妇产科医生 -->
			<view class="department-section">
				<view class="department-title">妇产科</view>
				<view class="doctor-list">
					<view class="doctor-item" v-for="(doctor, index) in allDoctors[3]" :key="index"
						@click="viewDoctorDetail(doctor)">
						<image class="doctor-avatar" :src="doctor.avatar"></image>
						<view class="doctor-info">
							<text class="doctor-name">{{ doctor.name }} <text
									class="doctor-title">{{ doctor.title }}</text></text>
							<text class="doctor-dept">{{ doctor.department }}</text>
							<text class="doctor-specialty">擅长：{{ doctor.specialty }}</text>
						</view>
						<view class="appointment-btn">预约</view>
					</view>
				</view>
			</view>

			<!-- 肿瘤科医生 -->
			<view class="department-section">
				<view class="department-title">肿瘤科</view>
				<view class="doctor-list">
					<view class="doctor-item" v-for="(doctor, index) in allDoctors[4]" :key="index"
						@click="viewDoctorDetail(doctor)">
						<image class="doctor-avatar" :src="doctor.avatar"></image>
						<view class="doctor-info">
							<text class="doctor-name">{{ doctor.name }} <text
									class="doctor-title">{{ doctor.title }}</text></text>
							<text class="doctor-dept">{{ doctor.department }}</text>
							<text class="doctor-specialty">擅长：{{ doctor.specialty }}</text>
						</view>
						<view class="appointment-btn">预约</view>
					</view>
				</view>
			</view>

			<!-- 骨科医生 -->
			<view class="department-section">
				<view class="department-title">骨科</view>
				<view class="doctor-list">
					<view class="doctor-item" v-for="(doctor, index) in allDoctors[5]" :key="index"
						@click="viewDoctorDetail(doctor)">
						<image class="doctor-avatar" :src="doctor.avatar"></image>
						<view class="doctor-info">
							<text class="doctor-name">{{ doctor.name }} <text
									class="doctor-title">{{ doctor.title }}</text></text>
							<text class="doctor-dept">{{ doctor.department }}</text>
							<text class="doctor-specialty">擅长：{{ doctor.specialty }}</text>
						</view>
						<view class="appointment-btn">预约</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				allDoctors: {
					// 内科医生
					0: [{
							id: '101',
							name: '张伟',
							title: '主任医师',
							department: '内科 - 心血管',
							specialty: '冠心病、高血压、心力衰竭、心律失常',
							avatar: '/static/doctors/man.jpg'
						},
						{
							id: '102',
							name: '李明',
							title: '副主任医师',
							department: '内科 - 呼吸',
							specialty: '哮喘、慢阻肺、肺部感染、肺炎',
							avatar: '/static/doctors/man.jpg'
						},
						{
							id: '103',
							name: '王芳',
							title: '主治医师',
							department: '内科 - 消化',
							specialty: '胃炎、肠炎、胃溃疡、胃食管反流病',
							avatar: '/static/doctors/women.png'
						}
					],
					// 外科医生
					1: [{
							id: '201',
							name: '刘强',
							title: '主任医师',
							department: '外科 - 普外',
							specialty: '肝胆外科、胰腺外科、微创手术',
							avatar: '/static/doctors/man.jpg'
						},
						{
							id: '202',
							name: '陈勇',
							title: '副主任医师',
							department: '外科 - 胸外',
							specialty: '肺癌、食管癌、纵隔肿瘤',
							avatar: '/static/doctors/man.jpg'
						},
						{
							id: '203',
							name: '赵杰',
							title: '主治医师',
							department: '外科 - 神经外科',
							specialty: '脑血管疾病、脑肿瘤、脊柱疾病',
							avatar: '/static/doctors/man.jpg'
						}
					],
					// 儿科医生
					2: [{
							id: '301',
							name: '周丽',
							title: '主任医师',
							department: '儿科 - 新生儿',
							specialty: '早产儿、新生儿疾病、儿童发育',
							avatar: '/static/doctors/women.png'
						},
						{
							id: '302',
							name: '吴小红',
							title: '副主任医师',
							department: '儿科 - 儿童哮喘',
							specialty: '小儿哮喘、过敏性疾病、肺炎',
							avatar: '/static/doctors/women.png'
						}
					],
					// 妇产科医生
					3: [{
							id: '401',
							name: '杨华',
							title: '主任医师',
							department: '妇产科 - 产科',
							specialty: '高危妊娠、产科并发症、产前诊断',
							avatar: '/static/doctors/man.jpg'
						},
						{
							id: '402',
							name: '孙燕',
							title: '副主任医师',
							department: '妇产科 - 妇科',
							specialty: '宫颈疾病、卵巢囊肿、子宫内膜异位症',
							avatar: '/static/doctors/women.png'
						},
						{
							id: '403',
							name: '林玲',
							title: '主治医师',
							department: '妇产科 - 生殖',
							specialty: '不孕不育、辅助生殖技术、优生优育',
							avatar: '/static/doctors/women.png'
						}
					],
					// 肿瘤科医生
					4: [{
							id: '501',
							name: '郑阳',
							title: '主任医师',
							department: '肿瘤科 - 放疗',
							specialty: '肺癌放疗、头颈部肿瘤、放射治疗',
							avatar: '/static/doctors/man.jpg'
						},
						{
							id: '502',
							name: '黄建国',
							title: '副主任医师',
							department: '肿瘤科 - 化疗',
							specialty: '乳腺癌、胃癌、结直肠癌化疗',
							avatar: '/static/doctors/man.jpg'
						}
					],
					// 骨科医生
					5: [{
							id: '601',
							name: '朱伟东',
							title: '主任医师',
							department: '骨科 - 脊柱',
							specialty: '颈椎病、腰椎间盘突出、脊柱侧弯',
							avatar: '/static/doctors/man.jpg'
						},
						{
							id: '602',
							name: '唐明',
							title: '副主任医师',
							department: '骨科 - 关节',
							specialty: '关节置换、运动损伤、关节炎',
							avatar: '/static/doctors/man.jpg'
						},
						{
							id: '603',
							name: '彭辉',
							title: '主治医师',
							department: '骨科 - 手足',
							specialty: '手足外伤、手足畸形矫正、骨折',
							avatar: '/static/doctors/man.jpg'
						}
					]
				}
			}
		},
		methods: {
			viewDoctorDetail(doctor) {
				console.log(`Viewing doctor: ${doctor.name}`);
				uni.navigateTo({
					url: `/pages/index/doctor?id=${doctor.id}&name=${doctor.name}&avatar=${doctor.avatar}`
				});
			}
		}
	}
</script>

<style>
	.doctor-search-section {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
	}

	.department-section {
		margin-bottom: 30rpx;
	}

	.department-title {
		font-size: 32rpx;
		font-weight: bold;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.doctor-list {
		display: flex;
		flex-direction: column;
	}

	.doctor-item {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.doctor-avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
	}

	.doctor-info {
		flex: 1;
		margin-left: 20rpx;
	}

	.doctor-name {
		font-size: 30rpx;
		font-weight: bold;
	}

	.doctor-title {
		font-size: 26rpx;
		color: #3399ff;
		margin-left: 10rpx;
	}

	.doctor-dept {
		font-size: 24rpx;
		color: #666;
		margin: 6rpx 0;
	}

	.doctor-specialty {
		font-size: 24rpx;
		color: #999;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.appointment-btn {
		background-color: #f3d5ff;
		color: #333;
		padding: 10rpx 30rpx;
		border-radius: 50rpx;
		font-size: 26rpx;
	}
</style>